★다방 랜딩페이지 TIL 48 | ★다방 랜딩페이지17(고정이미지배경) 'season-product'이라는 클래스명의 섹션을 만들어 준다 그 안에 가운데 배치를 위한 클래스명 'inner'인 div요소를 생성해준다 inner 안에 우선 이미지 파일 1개(product)를 넣어 두고 class명은 product으로 한다 inner 안에 text-group이라는 div요소를 만들어준다 text-group 안에 이미지 파일 2개(설명 이미지파일 2개)를 넣어주고 in... ★다방 랜딩페이지★다방 랜딩페이지 TIL 59 | ★다방 랜딩페이지20(Footer) 패스트캠퍼스 온라인 강의를 통해 만든 ★다방 랜딩페이지. 웹페이지의 하단 요소인 Footer를 작성하며 배운 내용들을 적어본다. 사이트 하단 부분의 영역을 의미한다. header와 마찬가지로 기능은 없지만 영역구분의 의미가 있는 <footer> 태그를 가지고 있다. HTML에서 유니코드를 입력하면 자동으로 불러와지는 특수기호들이 있다. 아래 그림처럼 HTML에 ©를 입력하면 출력은 ... ★다방 랜딩페이지★다방 랜딩페이지 TIL 46 | ★다방 랜딩페이지15(유튭 영상 배경으로 넣기) YOUTUBE 영상을 배경으로 넣는 방법을 배웠다 HTML에서 왜 "youtube__area"와 형제 요소로 "youtube__cover"를 두는지와 Youtube IFrame API 문서의 3번을 실행할 때, 변수 선언부분 var player;는 왜 스킵하고 Youtube IFrame API(developers.google.com)에서 제공하는 형식을 따르기 위해 <div id="playe... ★다방 랜딩페이지★다방 랜딩페이지 TIL 39 | ★다방 랜딩페이지8(섹션1-버튼,순차적애니메이션) 패스트캠퍼스 온라인 강의를 통해 만든 ★다방 랜딩페이지 SECTION1의 코드(HTML, CSS, JS)를 review해보자 btn : 버튼은 공통 class .btn으로 묶어서 한 스타일로 제어할 수 있도록 해줌. CSS를 먼저 작성해준다음에 HTML class 추가하는 방식 사용해봄(부트스트랩 방식) box-sizing: border-box; : 요소의 크기 계산 기준. border-bo... ★다방 랜딩페이지★다방 랜딩페이지 TIL 41 | ★다방 랜딩페이지10(공지사항-슬라이드, swiper) 패스트캠퍼스 온라인 강의를 통해 만든 ★다방 랜딩페이지. 슬라이드를 만들 수 있는 Swiper에 대해 배웠다! 수직 슬라이드도 만들었다 notice 왼쪽 라인에 공지사항 4개가 자동, 반복적으로 슬라이드처럼 회전하면서 한 개씩 보여질 수 있도록 swiper 라이브러리를 사용하였다 swiper.js는 편리하고 강력한 슬라이더를 구현하는 라이브러리이다. swiper-container 이름의 요소... ★다방 랜딩페이지★다방 랜딩페이지 TIL 36 | ★다방 랜딩페이지 만들기6(BEM) 별다방 랜딩페이지를 만들면서 찾아본 BEM에 대해 적어보자 BEM이란 HTML 클래스 속성의 작명법 요소__일부분 : Underscore(Lodash) 기호로 요소의 일부분을 표시 요소--상태 : Hyphen(Dash) 기호로 요소의 상태를 표시 class 선택할 때, .container .item > 이렇게 하는 경우, item의 자식요소인 name도 선택이 되는 경우가 있다 그래서 탄생된... ★다방 랜딩페이지★다방 랜딩페이지
TIL 48 | ★다방 랜딩페이지17(고정이미지배경) 'season-product'이라는 클래스명의 섹션을 만들어 준다 그 안에 가운데 배치를 위한 클래스명 'inner'인 div요소를 생성해준다 inner 안에 우선 이미지 파일 1개(product)를 넣어 두고 class명은 product으로 한다 inner 안에 text-group이라는 div요소를 만들어준다 text-group 안에 이미지 파일 2개(설명 이미지파일 2개)를 넣어주고 in... ★다방 랜딩페이지★다방 랜딩페이지 TIL 59 | ★다방 랜딩페이지20(Footer) 패스트캠퍼스 온라인 강의를 통해 만든 ★다방 랜딩페이지. 웹페이지의 하단 요소인 Footer를 작성하며 배운 내용들을 적어본다. 사이트 하단 부분의 영역을 의미한다. header와 마찬가지로 기능은 없지만 영역구분의 의미가 있는 <footer> 태그를 가지고 있다. HTML에서 유니코드를 입력하면 자동으로 불러와지는 특수기호들이 있다. 아래 그림처럼 HTML에 ©를 입력하면 출력은 ... ★다방 랜딩페이지★다방 랜딩페이지 TIL 46 | ★다방 랜딩페이지15(유튭 영상 배경으로 넣기) YOUTUBE 영상을 배경으로 넣는 방법을 배웠다 HTML에서 왜 "youtube__area"와 형제 요소로 "youtube__cover"를 두는지와 Youtube IFrame API 문서의 3번을 실행할 때, 변수 선언부분 var player;는 왜 스킵하고 Youtube IFrame API(developers.google.com)에서 제공하는 형식을 따르기 위해 <div id="playe... ★다방 랜딩페이지★다방 랜딩페이지 TIL 39 | ★다방 랜딩페이지8(섹션1-버튼,순차적애니메이션) 패스트캠퍼스 온라인 강의를 통해 만든 ★다방 랜딩페이지 SECTION1의 코드(HTML, CSS, JS)를 review해보자 btn : 버튼은 공통 class .btn으로 묶어서 한 스타일로 제어할 수 있도록 해줌. CSS를 먼저 작성해준다음에 HTML class 추가하는 방식 사용해봄(부트스트랩 방식) box-sizing: border-box; : 요소의 크기 계산 기준. border-bo... ★다방 랜딩페이지★다방 랜딩페이지 TIL 41 | ★다방 랜딩페이지10(공지사항-슬라이드, swiper) 패스트캠퍼스 온라인 강의를 통해 만든 ★다방 랜딩페이지. 슬라이드를 만들 수 있는 Swiper에 대해 배웠다! 수직 슬라이드도 만들었다 notice 왼쪽 라인에 공지사항 4개가 자동, 반복적으로 슬라이드처럼 회전하면서 한 개씩 보여질 수 있도록 swiper 라이브러리를 사용하였다 swiper.js는 편리하고 강력한 슬라이더를 구현하는 라이브러리이다. swiper-container 이름의 요소... ★다방 랜딩페이지★다방 랜딩페이지 TIL 36 | ★다방 랜딩페이지 만들기6(BEM) 별다방 랜딩페이지를 만들면서 찾아본 BEM에 대해 적어보자 BEM이란 HTML 클래스 속성의 작명법 요소__일부분 : Underscore(Lodash) 기호로 요소의 일부분을 표시 요소--상태 : Hyphen(Dash) 기호로 요소의 상태를 표시 class 선택할 때, .container .item > 이렇게 하는 경우, item의 자식요소인 name도 선택이 되는 경우가 있다 그래서 탄생된... ★다방 랜딩페이지★다방 랜딩페이지